<script setup>
import { defineProps, ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
const props = defineProps({
  title: {
    type: String,
    default: 'Title',
  },
  // modelValue: {
  //   type: Boolean,
  //   default: false,
  // },
});
const emits = defineEmits(['update:modelValue']);

const isExpanded = ref(true);

const toggle = () => {
  isExpanded.value = !isExpanded.value;
  // emits('update:modelValue', !isExpanded.value);
  // console.log(isExpanded.value)
};
</script>

<template>
  <div class="section">
    <div class="section-header">
      <p class="section-header-title">{{ title }}</p>
      <el-icon @click="toggle" size="24"
        ><ArrowDown :style="!isExpanded && `transform: rotate(90deg)`"
      /></el-icon>
    </div>
    <div class="section-content" v-show="isExpanded">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.section {
  margin-bottom: 12px;
  &-header {
    padding: 0 12px;
    box-sizing: border-box;
    height: 50px;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    &-title {
      color: var(--mall-text-color-primary);
      font-size: 16px;
      font-weight: 500;
      flex: 1;
    }
  }

  .section-content {
    box-sizing: border-box;
    padding: 24px 0 0 0;
    transition: height 0.3s ease-in-out;
  }
}
</style>
